<template>
  <div :class="prefix" id="container"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { data } from '../config';
import G6 from '@antv/g6';
const prefix = 'basicShapes';

const graph = ref(null);

const initGraph = () => {
  // 获取盒子宽高
  const width = document.getElementById('container').scrollWidth;
  const height = document.getElementById('container').scrollHeight;

  // 生成G6对象
  graph.value = new G6.Graph({
    container: 'container',
    width,
    height,
    fitCenter: true, // 图形居中
    // 定义图形的操作模式
    modes: {
      // 默认模式包括拖动画布和拖动节点
      default: ['drag-canvas', 'drag-node'],
    },
    fitViewPadding: [20], // 画布上四周的留白宽度
  });

  graph.value.data(data); // 将数据填入到图表
  graph.value.render();

  console.log(graph.value.save());
};

onMounted(() => {
  initGraph();
});
</script>

<style lang="scss" scoped>
.basicShapes {
  width: 100%;
  height: calc($height - 40px);
}
</style>
